<html>
<header>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</header>
<body>
<h2>MQTT Web socket!</h2>
<div>
    <input id="input"/>
    <button onclick="sendMessage()">发送</button>
</div>
<hr/>
<div id="messages">

</div>
<script src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
<script src="js/paho-mqtt.js"></script>
<script>
    // Create a client instance
    var client = new Paho.MQTT.Client("192.168.242.135", 8083, "websocket-2922727");

    // set callback handlers
    client.onConnectionLost = onConnectionLost;
    client.onMessageArrived = onMessageArrived;

    // connect the client
    client.connect({onSuccess: onConnect, userName: "demo", password: "demo"});

    // called when the client connects
    function onConnect() {
        // Once a connection has been made, make a subscription and send a message.
        console.log("onConnect");
        client.subscribe("topic/machine");
    }

    // called when the client loses its connection
    function onConnectionLost(responseObject) {
        if (responseObject.errorCode !== 0) {
            console.log("onConnectionLost:" + responseObject.errorMessage);
        }
    }

    // called when a message arrives
    function onMessageArrived(message) {
        $("#messages").append($("<div>" + message.payloadString + "</div>"))
    }

    function sendMessage() {
        var message = new Paho.MQTT.Message($("#input").val());
        message.destinationName = "topic/machine/282738";
        //message.topic = "topic/machine/282738";
        message.qos = 1;
        client.send(message);
        $("#input").val("")
    }
</script>
</body>
</html>
